/* 
    Document   : master
    Created on : Dec 25, 2009, 4:01:46 PM
    Author     : ppt
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

body{
font-family:Arial;
font-size:13px;
background:#ccc url('../images/header-bg.png') repeat-x top left; /* to make the navigation list look & behave like tabs. for the tabs check out A List Apart tutorial. link at the bottom of the post */
}
#container{
width:960px;
margin:0 auto; /* for centering the container. Means 0 margin from top and the bottom and Automatic margins for left and right. */
overflow:hidden; /* for clearing floats inside it */

border-right:1px solid #000; /* only to know the edges. to be removed at the end */
border-left:1px solid #000; /* only to know the edges. to be removed at the end */

}
#header{
position:relative; /* to absolutely position the ul at the bottom right side of this */
float:left;
width:100%;
height:150px;
overflow:hidden; /* for clearing floats inside it */
}
img#logo{
float:left; /* for getting the tagline inline with it. instead of below it. */
margin:60px 15px 0 5px; /* margin: top right bottom left; */
}
.tagline{
float:left; /* for getting the search form inline with it. instead of below it. */
margin:70px 0;
height:20px; /* for IE6 */
}
#search-form{
display:inline; /* for IE6 */
float:right;
margin:55px 10px 0 0;
}
#search-form input{
float:left; /* for getting the search box and submit button inline with each other. */
}
#search-box{
background: url('../images/search-bg.png') repeat-x top left; /* the background gradient repeated on the X-Axis */
border:1px solid #c9c9c9;
border-right:none; /* to make the illusion of the search box and button being joint */
color:#ebebeb; /* text color */
padding:8px;
}
#header ul{
position:absolute; /* to absolutely position this at the bottom right side of the header */
bottom:0; /* 0px away from the bottom */
right:10px; /* 10px away from the right */
margin:0;
padding:0;
overflow:hidden; /* for clearing floats inside it */
}
#header ul li{
display:inline; /* for IE6 */
margin:5px 10px 0 10px;
padding:0 0 0 13px; /* padding: top right bottom left; */
background:url('../images/left.png') no-repeat left top;
float:left;
}
#header ul li a{
display:block;
text-decoration:none;
color:#fff;
background:url('../images/right.png') no-repeat right top;
padding:5px 15px 5px 0px;
}
#header ul li#active{
background:url('../images/left-hover.png') no-repeat left top;
}
#header ul li#active a{
background:url('../images/right-hover.png') no-repeat right top;
padding:5px 15px 6px 0;
color:#000;
}

        #content-container{
	width:100%;
	height:auto;
	overflow:hidden; /* for clearing the floats inside it */
	float:left;
}
#sidebar{
	width:300px;
	margin-right:5px;
	float:left;
}
#sidebar h3{ /* these are the two headings. Products and Latest Updates */
	font-family:Arial;
	font-size:15px;
	color:#000;
	padding:10px;
}
#content{
	float:left;
	width:634px; /* because of 1px border to this element, else it would be 635px  */
	height:800px; /* temporary */
	padding:10px;
	background:#c4c4c4;
	border-bottom: 1px solid #444; /* temporary */
	border-left: 1px solid #444;
}
/* Accordion */
#accordion-container {
	width: 290px;
	margin:0 0 10px 7px; /* top right bottom left */
}
ul#accordion, ul#accordion ul { background:#f8f7f7; }
ul#accordion { border-bottom: 1px solid #444; }
ul#accordion li {
	border: 1px solid #444;
	border-bottom: none; /* to avoid double borders at bottom */
}
ul#accordion ul li {
	border: none; /* to remove the excess borders from previous properties */
	border-bottom: 1px solid #C2C8D1; /* and then put what we like. */
	padding: 5px 10px;  /* [top | bottom] [left | right] */
}
ul#accordion ul li:last-child { border-bottom: none; } /* to remove the borders from the last list element */
ul#accordion a.heading { /* the big menu names in the accordion */
	background: #d9d4ce;
	color: #46382f;
	display: block;
	font-size: 18px;
	line-height: 18px;
	padding: 10px 5px;
	text-decoration: none;
}
ul#accordion a.heading:hover { /* mouseover the big menu names in the accordion */
	background: #46382f;
	color: #fff;
}
ul#accordion li ul a { /* the inside-menu elements */
	color: #000;
	text-decoration:none;
}
ul#accordion li ul a:hover { border-bottom: 1px dotted #46382f; } /* to give the inside-menu elements mouseover */
/* End Accordion */
#curved-box{
	background:#d9d4ce;
	width:288px;
	height:205px;
	padding:10px;
	border:1px solid #444;
	margin:10px 0 10px 7px;
}
#curved-box p{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom: 1px dotted #444;}

